import * as React from 'react'
import {Link, match, Redirect, Route} from 'react-router-dom'
import {AuthRoute} from '../utils/AuthRoute'
import {ReactRouterComponent} from "../utils/ReactRouterComponent";
interface HomeState {
    isAuthOk: boolean
}

export default class Index extends ReactRouterComponent<any, HomeState> {
    public state = {
        isAuthOk: false
    }
    constructor(props: any) {
        super(props)
    }

    public Happy = () => {
        return (
            <div>happy</div>
        )
    }
    public Login = () => {
        const {location} = this.props
        let redirect = <div/>
        if (this.state.isAuthOk) {
            if (location.state && location.state.from) {
                redirect = <Redirect to={location.state.from}/>
            } else {
                redirect = <Redirect to={this.routePath('happy')}/>
            }
        }
        return (
            <div>
                {redirect}
                <button onClick={this.login(true)}>login</button>
            </div>
        )
    }
    public login = (isAuthOk: boolean) => () => {
        this.setState({isAuthOk})
    }

    public Private = () => {
        if (this.state.isAuthOk) {

            return (
                <div>
                    <button onClick={this.login(false)}>logout</button>
                    <div>Private</div>
                </div>
            )
        } else {
            return <Redirect to={{
                pathname: this.routePath('login'),
                state: { from: this.props.location.pathname}
            }}/>
        }
    }

    public Nav = (routerMatch: match<any>) => () => {
        return (
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to={this.routePath('happy')}>happy</Link>
                        </li>
                        <li>
                            <Link to={this.routePath('private')}>private</Link>
                        </li>
                        <li>
                            <Link to={this.routePath('login')}>login</Link>
                        </li>
                    </ul>
                </nav>
            </div>
        )
    }
    public render() {
        const {match, location} = this.props
        console.log(location)
        return (
            <div>
                <Route path={this.routePath('')} exact={true} component={this.Nav(match)}/>
                <Route path={this.routePath('happy')} component={this.Happy}/>
                <Route path={this.routePath('login')} component={this.Login}/>
                <AuthRoute
                    right={this.state.isAuthOk}
                    path={this.routePath('private')}
                    redirect={this.routePath('login')}
                    component={this.Private}/>
                <div>{`${location.hash} ${location.path} ${location.search} ${String(location.state)}`}</div>
            </div>
        )
    }

    // private authIt = (isAuthOk: boolean) => {
    //     this.setState({isAuthOk})
    // }
}

